<template>
  <div class="person">
    <h2>汽车信息:一俩{{car.brand}} 价值{{car.price}}</h2>
    <button @click="changeBrand">修改计算机品牌</button>
    <button @click="changePrice">修改价格</button>
    <button @click="changeCar">修改汽车所有信息</button>
    <br>
    <hr>
    <h2>当前求和为:{{sum}}</h2>
    <button @click="changeSum">touch me +1</button>
    <!--     <h2>游戏列表:</h2>-->
    <!--     <ul>-->
    <!--       <li v-for=" g in games" :key="g.id">{{g.name}}</li>-->
    <!--     </ul>-->
    <!--  <button @click="changeFirstGame">修改第一个游戏名字</button>-->
    <!--     <button @click="changeSecondName">修改第二个游戏名字</button>-->
    <!--     <button @click="changeThirdName">修改第三个</button>-->
    <!--     <hr>-->
    <!--     <h2>测试{{obj.a.b.c}}</h2>-->
    <!--     <button @click="changeObj">修改测试结果</button>-->
  </div>

</template>

<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
/**
 * @author
 * 基本类型响应式数据必须用ref 若需要永固一个响应式对象层级不深ref，reactive都可以 若需要一个响应式对哦哦行,并且层级较深推荐实用reactive
 */
import {ref,reactive} from "vue";
function changeBrand(){
  car.brand='法拉利'
}

function changeCar(){
  // car={brand:'五菱宏光',price:'5000' }无法更新页面
  // Object.assign(car,{brand:'小米',price:20}) reactive更新
  // car.value ={brand: '五菱宏光',price: 1} //ref 修改更新页面
}

//reactive 对象类型
let car=reactive({brand:'奔驰',price:100})
let sum=ref(0)
// let games=ref([{id:'one',name:'wzry'},
//   {id:'two',name:'ys'},
//   {id:'three',name:'sgz'}
// ])
// let obj=reactive({
//   a:{
//     b:{
//       c:666
//     }
//   }
// })
// function changeObj(){
//   obj.a.b.c+=99
// }
function changeSum(){
  sum.value+=1
  // sum=ref(9)
}


function changePrice(){
  car.price+=10
}
// function changeFirstGame(){
//   games.value[0].name='修改后的game1'
// }
// function changeSecondName(){
//   games.value[1].name="修改后的game2"
// }
// function changeThirdName(){
//   games.value[2].name="修改后的game3"
// }
//可自动返回对象
</script>
<style>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
li{
  font-size: 30px;
}
</style>